/**
 * @description  因子收益率（归因分析）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC } from '../../../../comps';
import style from '../index.less';

class FactorYield extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'attributionAnalysisM/getFactorYield',
      payload: args,
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { dispatch, args } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args)) {
      dispatch({
        type: 'attributionAnalysisM/save',
        payload: { FactorYield: { xAxis: undefined, series: undefined } },
      });
      dispatch({
        type: 'attributionAnalysisM/getFactorYield',
        payload: args,
      });
    }
  }

  showCharts = () => {
    const {
      attributionAnalysisM: { FactorYield },
    } = this.props;
    const xAxis = FactorYield.xAxis;
    const series = FactorYield.series;
    return (
      <div style={{ height: '455px' }}>
        <XYAxisChartsC
          xAxis={xAxis}
          series={series}
          height='445px'
          yAxisUnit={['单位(%)']}
          dataZoom={true}
          width='100%'
          legendSelect={{ 残余波动性因子: false, 非线性市值因子: false, 流动性因子: false, 杠杆因子: false }}
        />
      </div>
    );
  };

  render() {
    return (
      <div className={style.back_charts}>
        <div style={{ height: '455px' }} className='echarts'>
          {this.showCharts()}
        </div>
      </div>
    );
  }
}
export default connect(({ attributionAnalysisM }) => ({
  attributionAnalysisM,
}))(FactorYield);
